<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a {
            display: block;
        }

        /* 属性选择器,使用[]标识 属性*/
        a[title] {
            color: red;
        }
        /* 等于 */
        input[type=text] {
            color: red;
        }
        /* 包含 */
        input[type *=text] {
            color: red;
        }
        /* 以..开头 */
        div[class ^=font1] {
            color: red;
        }

        /* 以...结尾 */
        div[class$='24'] {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#" title="百度">我是一个百度</a>
    <a href="#" title="新浪">我是一个新浪</a>
    <a href="#">网易</a>
    <a href="#">搜狐</a>
    <a href="#">土豆</a>

    <input type="text" value="文本框"></input>
    <input type="submit"></input>
    <input type="reset"></input>
    <input type="text" value="文本框"></input>


    <div class="font12">属性选择器</div>
    <div class="font12">属性选择器</div>
    <div class="font12">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font25">属性选择器</div>
</body>

</html>